<template>
  <div>
    <div style="text-align: left; margin-bottom: 5px">
      <el-button size="mini" type="primary" @click="toAdd">
        添加
      </el-button>
    </div>

    <!--增加或更新的表单弹窗-->
    <el-dialog :title=formTitle :visible.sync="flagShowForm">
      <el-form ref="form" :model="formData" label-width="150px" style="text-align:left">
        <el-form-item label="商品类别名称" prop="name" required>
          <el-input v-model="formData.name" placeholder="输入商品类别名称"></el-input>
        </el-form-item>
        <el-form-item label="显示顺序" prop="displayOrder">
          <el-input-number v-model="formData.displayOrder" type="number" placeholder="输入显示顺序"></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetForm">重置</el-button>
          <el-button type="primary" @click="confirmSubmit">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--列表-->
    <el-table :data="goodsCategoryList" :default-sort="{prop: 'displayOrder'}">
      <el-table-column label="id" prop="id" sortable></el-table-column>
      <el-table-column label="商品类别名称" prop="name" sortable></el-table-column>
      <el-table-column label="显示顺序" prop="displayOrder" sortable></el-table-column>

      <el-table-column label="是否显示该类商品">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.showStatus"
                     @change="updateGoodsCategoryShowStatus(scope.row)"></el-switch>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="130">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="toEdit(scope.row)">编辑</el-button>
          <el-button type="text" size="mini" @click="toDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import * as goodsCategoryAdminApi from "../api/goodsCategoryAdminApi";

export default {
  name: "goodsCategoryAdmin",
  data() {
    return {
      goodsCategoryList: [],
      flagShowForm: false,
      formTitle: '添加',
      formData: {}
    }
  },
  mounted() {
    this.getGoodsCategoryList()
  },
  methods: {
    // 获取数据
    getGoodsCategoryList() {
      goodsCategoryAdminApi.getGoodsCategoryList({
        success: res => {
          this.goodsCategoryList = res.data
        }
      })
    },
    // 重置表单
    resetForm() {
      this.formData = {
        id: 0,
        name: "",
        displayOrder: 0,
      }
    },
    // 增加
    toAdd() {
      this.resetForm()
      this.flagShowForm = true
      this.formTitle = '添加'
    },
    // 删除
    toDelete(id) {
      this.$confirm("对应的商品也会一并删除，确定删除吗？").then(() => {
        goodsCategoryAdminApi.deleteGoodsCategory({
          id: id,
          showLoading: true,
          success: () => {
            this.getGoodsCategoryList()
          }
        })
      }).catch(() => {
      })
    },
    // 编辑
    toEdit(goodsCategory) {
      this.formData = JSON.parse(JSON.stringify(goodsCategory)) // 深拷贝
      this.flagShowForm = true
      this.formTitle = '更新'
    },
    // 提交表单
    confirmSubmit() {
      if (!this.formData.name) {
        this.$message.error("请输入类别名称")
        return
      }
      this.flagShowForm = false;
      if (this.formTitle.startsWith('添加')) {
        goodsCategoryAdminApi.addGoodsCategory({
          data: this.formData,
          success: () => {
            this.getGoodsCategoryList()
          }
        })
      } else if (this.formTitle.startsWith('更新')) {
        goodsCategoryAdminApi.updateGoodsCategory({
          data: this.formData,
          success: () => {
            this.getGoodsCategoryList()
          }
        })
      }
    },
    // 显示该类商品或隐藏该类商品
    updateGoodsCategoryShowStatus(category) {
      goodsCategoryAdminApi.updateGoodsCategory({
        data: category,
      })
    },
  }
}
</script>
